<template>
	<u-popup :show="showCoupon" round="10" :closeable='true' @close="closeClick" >
		<!-- <view class="center fontS32 co3" style="padding: 24rpx 0;" v-if="type!=0">
			优惠券
		</view> -->
		<view class='imgBox' >
				   <text class='text co3 fontS40' v-if="type==0" >优惠券大礼包</text>
				   <text class='text co3 fontS40' v-else >优惠券</text>
				  <image :src="info.image?info.image:'/static/images/copbgc.png'" mode="widthFix" class="bgc" style="width: 100%;"></image>
		</view>
		<scroll-view scroll-y="true" style='max-height:60vh;margin-top: 120rpx;' >
			<view  class='lisInfoBox' style=""> 
				<view class='lis' v-for="(item,index) in copuonList" :key="index">
					<view class='box'>
						<view class='liBox'>
							<view class='whiBox flexJBC'>
								 <view class='left'>
									<view class='left_t'>
										<view class='flex'>
											<view style="color: #EE8950;margin-right: 20rpx;" v-if="item.type==1">
												 <text class='fw7 fontS20'>￥</text>
												  <text class="fw9 fontS40">{{item.coupon_price}}</text>
											</view>
											<view style="color: #EE8950;margin-right: 20rpx;" v-if="item.type==2">
												 <text class="fw9 fontS40">{{item.discount}}</text>
												 <text class='fw7 fontS20'>折</text>
											</view>
											<view class="">
												<view class="co3 fw9 fontS24" style="margin-bottom: 10rpx;" >
													{{item.title}}
												</view>
												<view class="fontS16 co6" style="line-height: 35rpx;">
													<view class="" > 
														{{item.full_text}}
													</view>
													<view class="" v-if="item.time_type==0">
														<view class="" > 
															有效期：										
														</view>
														<view style="white-space: nowrap;">
															{{item.start_time}}-{{item.end_time}}
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class='left_b ' @click="item.showInfo=!item.showInfo">
										<view class="flexJBC">
											<view class="co6 fontS20">
												使用说明
											</view>
											<u-icon :name="item.showInfo?'arrow-down':'arrow-right'" size='16rpx' color="#666"></u-icon>
										</view>
										<view class="fontS16 co6" style="margin-top: 8rpx;"  v-if="item.showInfo">
											{{item.text}}
										</view>
									</view>
								 </view>
								 <view class='right'>
									 <view class='cilr'></view>
									  <view class='btn' v-if="type==0">自动领取</view>
									  <view class='btn' v-else   @click="getcouPon(item.coupon_id)">立即领取</view>
								 </view>
							</view>
						</view>
					</view>
				</view>
				<view class="rulesBox" v-if="type==0">
					<view class='rules'>
						<view class="center cof fontS28 fw9">
							优惠券使用规则
						</view>
						<view class="cof fontS24" style="line-height: 40rpx;margin-top:20rpx;">
							{{info.text}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</u-popup>
</template>

<script>
	export default{
		data(){
			return{
				info:'',
			}
		},
		mounted() {
			this.$my.post('/index/coupon/findCouponRule').then(res=>{
				if(res.code==200){
					this.info=res.data
				}
			})
		},
		props:{
			showCoupon:{ //是否显示弹窗
				default:false
			},
			copuonList:{   //优惠券列表
				default:[]
			},
			type:{
					default:1
			},//0是首页弹窗
		}, 
		methods:{
			getcouPon(id){
				this.$my.post('/index/coupon/userReceiveCoupon',{id:id}).then(res=>{
					if(res.code==200){
						this.$my.toast('领取成功')
						this.getList(true)
					}else{
						this.$my.toast(res.message)
					}
				})
			},
			closeClick(){
				this.$emit('showCouponClose',false)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rulesBox{
		background-color: #fff;
		padding-bottom: 6rpx;
		border-radius: 24rpx;
		margin-bottom: 24rpx;
		.rules{
				background: linear-gradient(180deg, #F4C28F 0%, #EDAC89 100%);
				border-radius: 24rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
	}
	.imgBox{
		
		text{
			z-index: 9;
			position: absolute;
			// width:100%;
			text-align: center;
			white-space: nowrap;
			margin-top: 32rpx;
			left: 50%;
			transform: translateX(-50%);
		}
			position: relative;
			left: 0%;
			top: 0;
		.bgc{
			position: absolute;
			left: 0%;
			top: 0;
			border-radius: 20rpx 20rpx 0;
			
		}
	}
	.lisInfoBox{
		left: 0;
		padding: 32rpx 32rpx 0;
		width: 100%;
		box-sizing: border-box;
		.lis{
			width: 100%;
			padding-bottom: 6rpx;
			background: #FFFFFF;
			border-radius:24rpx;
			margin-bottom: 16rpx;
			.box{
				background: linear-gradient(180deg, #F4C28F 0%, #EDAC89 100%);
				border-radius:24rpx;
				padding: 20rpx;
				box-sizing: border-box;
				.liBox{
					padding-bottom: 6rpx;
					background: #FAE5B4;
					box-shadow: 0px 8rpx 8rpx rgba(219, 140, 104, 0.5);
					border-radius: 24rpx;
						
					.whiBox{
						background: #FFFFFF;
						border-radius: 24rpx;
						.left{
							width: 70%;
							border-right: 1px dashed #E0E0E0;
							display: flex;
							justify-content: space-between;
							flex-direction: column;
							.left_t{
								flex: 1;
								padding:20rpx;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								justify-content: center;
								
							}
							.left_b{
								// height:46rpx;
								// line-height: 46rpx;
								padding:8rpx 20rpx ; 
								border-top: 2rpx solid #F5F5F5;
								// padding:0 20rpx;
								box-sizing: border-box;
							}
						}
						.right{
							padding: 20rpx;
							box-sizing: border-box;
							position: relative;
							.cilr{
								width: 10rpx;
								height:10rpx;
								background: #F0A54F;
								float: right;
								border-radius: 50%;
								position: absolute;
								right: 20rpx;
								top:-30rpx ; 
							}
							.btn{
								width: 158rpx;
								height: 54rpx;
								background: linear-gradient(180deg, #F3C18E 0%, #EDAC89 100%);
								border-radius: 40rpx;
								line-height: 54rpx;
								text-align: center;
								font-weight: 900;
								color: #fff;
							}
						}
					}
				}
			}
		}
	}
</style>